class gouwuche {
    constructor(el, tu, mingzi, jiage) {
        this.dom = document.querySelector(el)
        this.pic = tu
        this.name = mingzi
        this.price = jiage
        this.render()
        this.event()
    }
    render() {

        //left
        const shopArr = document.querySelectorAll('.shop')
        // console.log(shopArr);
        let str1 = ``
        for (let i = 0; i < this.pic.length; i++) {
            str1 = `
            <img src="${this.pic[i]}" alt="">
            <p>${this.name[i]}</p>
            <p>${this.price[i]}</p>
            <button>加入购物车</button>
        `
            shopArr[i].innerHTML = str1
            var count = 0;
            shopArr[i].onclick = () => {
                console.log(555);
                //right
                //渲染商品列表
                const rightEle = document.querySelector('.box .right')
                let str2 = ``
                str2 = `
                    <div class="menu">
                        <input type="checkbox">
                        <div class="pic">
                            <img src="${this.pic[i]}" alt="">
                            <h1>${this.name[i]}</h1>
                        </div>
                        <h2>${this.price[i]}</h2>
                        <span>-</span>
                        <h3>1</h3>
                        <span>+</span>
                        <h4>删除收藏</h4>
                    </div>
                `
                rightEle.innerHTML += str2

                //2.渲染商品数量
                //2.1计算商品数量
                count += 1
                document.querySelector('.title').innerHTML = `购物车(${count})`;

                //3.渲染总价
                //3.1 计算总价
                var price = 0
                price += 200
                document.querySelector('.sum').innerHTML = `总价:(${price})`;
                console.log(document.querySelector('.sum'));




            }
        }


    }
    event() {
        // var arr = [
        //     { name: '高级办公椅', price: 10000, count: 1 },
        //     { name: '高级按摩椅', price: 1000, count: 1 },
        //     { name: '高级电动按摩椅', price: 100, count: 1 },
        //     { name: '电动按摩椅', price: 10, count: 1 },
        //     { name: '老板椅', price: 20000, count: 1 },
        //     { name: '办公桌', price: 50000, count: 1 },
        //     { name: '可升降办公椅', price: 2000, count: 1 },
        //     { name: '可升降办公桌', price: 5000, count: 1 },
        // ]
        // //2.渲染商品数量
        // //2.1计算商品数量
        // var count = 0;
        // arr.forEach((item) => {
        //     count += item.count
        // })
        // document.querySelector('.title').innerHTML = `购物车(${count})`;

        // //3.渲染总价
        // //3.1 计算总价
        // var price = newarr.reduce((t, item) => {
        //     return t + item.count * item.price;
        // }, 0)
        // //3.2 渲染总价
        // document.querySelector('.sum').innerHTML = `总价:(${price})`;



    }
}
let photo = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg']
let mingzi = ['高级办公椅', '高级按摩椅', '高级电动按摩椅', '电动按摩椅', '老板椅', '办公桌', '可升降办公椅', '可升降办公桌']
let jiage = ['10000', '2000', '2000', '2000', '2000', '2000', '2000', '2000']
let index = 0;
let t1 = new gouwuche('.shop', photo, mingzi, jiage)

